<template>
  <div id="texts"></div>
</template>

<script>
import * as PIXI from 'pixi.js'

export default {
  name: 'texts',
  mounted() {
    let _this = this
    this.$nextTick(() => {
      _this.initPixi()
    })
  },
  methods: {
    initPixi() {
      const options = {
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: 0x1099bb,
        resolution: window.devicePixelRatio || 1,
        antialias: true
      }
      // 创建应用
      const app = new PIXI.Application(options)
      // 将应用画布添加到DOM中
      document.querySelector('#texts').appendChild(app.view)

      // 显示文字
      const text = new PIXI.Text('文本信息', {
        fontSize: 300,
        fill: 0xff0000,
        align: 'center'
      })
      // 设置文字位置
      text.x = app.screen.width / 2
      text.y = app.screen.height / 2
      // 设置锚点
      text.anchor.set(0.5)
      // app.stage.addChild(text)

      // 创建一个圆形
      const circle = new PIXI.Graphics()
      circle.beginFill(0x0000ff)
      circle.drawCircle(app.screen.width / 2, app.screen.height / 2, 100)
      circle.endFill()
      circle.x = app.screen.width / 2
      circle.y = app.screen.height / 2

      const arrow = PIXI.Sprite.from('/textures/arrow.png')

      // 创建精灵
      const bunny = PIXI.Sprite.from('/textures/bg.png')
      // 设置精灵铺满屏幕
      bunny.width = app.screen.width
      bunny.height = app.screen.height
      // 使用文字作为精灵的遮罩
      bunny.mask = text
      // 使用圆形作为精灵的遮罩
      // bunny.mask = arrow
      app.stage.addChild(bunny)
    }
  }
}
</script>
<style>
#texts {
  width: 100%;
  height: 100%;
}
</style>
